<template>
	<el-dialog title="用户套餐订阅情况" :visible.sync="dialogVisible" width="700px" :before-close="handleClose">
		<div>
			<el-form :inline="true">
				<el-form-item>
					<el-select v-model="searchForm.app_id" placeholder="请选择应用名称">
						<el-option v-for="item in appList" :key="item.label" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="searchForm.status" placeholder="请选择状态">
						<el-option v-for="item in statusList" :key="item.label" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button @click="paroductInfo">搜索</el-button>
				</el-form-item>
				<el-form-item>
					<el-button @click="reloadList">重置</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="tableData" tooltip-effect="dark" style="width: 100%" height="500" border stripe>
				<el-table-column prop="app_id" label="应用名称" align="center"> </el-table-column>
				<el-table-column prop="product_name" label="产品名称" align="center"> </el-table-column>
				<el-table-column prop="source" align="center" label="来源">
					<template slot-scope="scope">
						<div v-if="scope.row.source === 'SUBSCRIPTION'">订阅</div>
						<div v-if="scope.row.source === 'QUOTA'">兑换</div>
						<div v-if="scope.row.source === 'REDEMPTION'">配额</div>
						<div v-if="scope.row.source === 'PURCHASE'">购买</div>
					</template>
				</el-table-column>
				<el-table-column prop="status" align="center" label="状态">
					<template slot-scope="scope">
						<el-tag size="small" v-if="scope.row.status === 'EFFECTIVE'" type="success">生效</el-tag>
						<el-tag size="small" v-if="scope.row.status === 'EXPIRED'" type="danger">过期</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="gmt_create" align="center" label="创建时间">
					<template slot-scope="scope">
						{{ formatTime(scope.row.gmt_create) }}
					</template>
				</el-table-column>
				<el-table-column prop="expiration_time" align="center" label="过期时间">
					<template slot-scope="scope">
						{{ formatTime(scope.row.expiration_time) }}
					</template>
				</el-table-column>
			</el-table>
		</div>
	</el-dialog>
</template>

<script>
import dayjs from 'dayjs';
import { appList } from '../../components/data.ts';
export default {
	name: 'ProductList',
	data() {
		return {
			total: 0,
			size: 10,
			current: 1,
			tableData: [],
			editForm: {},
			dialogVisible: false,
			searchForm: {},
			appList,
			statusList: [
				{ value: '', label: '全部' },
				{ value: 'EFFECTIVE', label: '有效' },
				{ value: 'EXPIRED', label: '过期' },
			],
		};
	},
	methods: {
		handleClose() {
			this.dialogVisible = false;
			this.editForm = {};
		},
		reloadList() {
			this.searchForm = {};
			this.paroductInfo();
		},
		formatTime(time) {
			if (time) {
				const localTime = dayjs(time).format('YYYY-MM-DD HH:mm:ss');
				// 使用Day.js将时间转换成当前时区的时间
				return localTime;
			}
			return '';
		},
		paroductInfo() {
			this.$axios
				.get('/expense/user/plan/detail', {
					params: {
						user_id: this.editForm.user_id,
						app_id: this.searchForm.app_id,
						status: this.searchForm.status,
					},
				})
				.then((res) => {
					console.log(res);
					this.tableData = res.data.user_product_list;
				});
		},
		init(item) {
			this.dialogVisible = true;
			const info = JSON.parse(JSON.stringify(item));
			this.searchForm = {};
			this.editForm = {
				user_id: info.uid,
				app_id: info.app_id,
			};
			this.paroductInfo();
		},
	},
};
</script>

<style scoped></style>
